<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Application States</title>
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td>
	<a href="home.html">Home</a> &gt; <a href="userguide.html">Using Maqetta</a>
		 &gt; <a href="applicationStates.html">Application States</a>
    </td>
    <td class="prevnext">
    <a href="applicationStates.html">Previous</a> / <a href="applicationStates.html">Next</a>
    </td></tr>
</table>

<h1>About Application States</h1>

<p>Application states represent the different views that make up an interactive web page. A common scenario is a page that presents a pop-up dialog window to the user. Based on the user's response to the dialog, new elements could be displayed on the page.  This can be represented with the following states:</p> 
<ol>
<li>"Normal" state - the page before the dialog window is popped up</li>
<li>"Dialog" state - the page displaying the dialog window</li>
<li>"Completed" state - the page after the dialog window is closed, causing something to change on the page</li>
</ol>
<p>Note that the state names can be any names defined by the designer, except for the "Normal" state which is provided by Maqetta for all pages.
See <i>Scenes Palette</i> for details.</p>

<h3>Using Events To Change States</h3>

<p>Once your application states are defined, you'll need some event triggers to change from one state to the next.</p>

<p>A button can be presented in the "Normal" state which, when clicked, brings up the "Dialog" state (i.e. pops up the dialog window). To do this in Maqetta, simply edit the button's <b>onclick</b> event property and select "state:Dialog" from the drop-down list (assuming you have previously created a state called "Dialog"). See <b>Event Properties</b> in <i>Properties Palette</i> for details.</p> 

<p>Then in the dialog window you'll need a button who's <b>onclick</b> property is set to the "Completed" state. You could also have a Cancel button that is set to the "Normal" state.</p>

<p>See tutorials <i>Task Manager (Scene Graph)</i> and <i>Task Manager (Application States)</i> to create a working example of this scenario.</p>



<p class="prevnext"><a href="applicationStates.html">Previous</a> / <a href="applicationStates.html">Next</a></p>

</div>  <!-- pagebody -->

</body>
</html>